<%--
声明必须位于 HTML5 文档中的第一行，也就是位于 <html> 标签之前。该标签告知浏览器文档所使用的 HTML 规范
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML，所以不需要引用 DTD。
请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。
HTML 4.01 与 HTML5 之间的差异在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种：<!DOCTYPE html>
--%>
<!DOCTYPE html>
<%--
1.在JSP标准的语法中，如果 pageEncoding属性存在，那么JSP页面的字符编码方式就由pageEncoding决定，否则就由contentType属性中的
charset决定，如果charset也不存在，JSP页面的字符编码方式就采用默认的ISO-8859-1。
2.ContentType属性指定了MIME类型和JSP页面回应时的字符编码方式。MIME类型的默认值是“text/html”; 字符编码方式的默认值是“ISO-8859-1”.
MIME类型和字符编码方式由分号隔开.字符编码方式charset是指页面处理服务器返回的数据的编码格式.
3.在理论上，charset可以使用任何字符编码，但并不是所有浏览器都能够理解它们。某种字符编码使用的范围越广，浏览器就越有可能理解它。
 --%>
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<html>

  <head>
  <%-- <meta charset="UTF-8"> 在静态页面中使用, 功能与JSP<%@ page contentType="text/html;charset=UTF-8"%> 中的pageEncoding
  类似.--%>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>秘密花园后台管理系统</title>
    <jsp:include page="cssList.jsp" flush="true"/>
</head>

  <body class="hold-transition sidebar-mini">

  <div class="wrapper">
    <!--
      include指令与 jsp:include 动作的区别：
      include 指令通过file属性来指定被包含的页面。jsp:include 动作通过page属性来指定被包含的页面。使用 include 指令，
      被包含的文件被原封不动的插入到包含页面中使用该指令的位置，然后JSP编译器再对这个合成的文件进行编译，所以在一个JSP页面
      中使用include指令来包含另一个JSP页面，最终编译后的文件只有一个。（静态包含）使用 jsp:include 动作包含文件时，
      当该动作标识执行后，JSP程序会将请求转发到（注意不是重定向）被包含页面，并将执行结果输出到浏览器中，然后返回页面继续执
      行后面的代码，以为web容器执行的两个文件，所以JSP编译器会分别对这两个文件进行编译。（动态包含）
      注意：（使用 jsp:include 动作通常是包含那些经常改动的文件，因为被包含的文件改动不会影响到包含文件，
      因此不需要对包含文件进行重新编译）
    -->
    <jsp:include page="topMenu.jsp" flush="true"/>
    <jsp:include page="leftMenu.jsp" flush="true"/>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
      <!-- 导航栏开始Content Header (Page header) -->
      <div class="content-header">
        <div class="container-fluid">
          <div class="row mb-2">
            <div class="col-sm-6">
              <h1 class="m-0 text-dark">导航栏</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
              <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="#">首页</a></li>
                <li class="breadcrumb-item active">导航条</li>
              </ol>
            </div><!-- /.col -->
          </div><!-- /.row -->
        </div><!-- /.container-fluid -->
      </div>
      <!-- 导航栏结束/.content-header -->

      <!-- 首页所有功能开始Main content -->
      <section class="content">
        <div class="container-fluid">

          <!-- 四个小盒子开始Small boxes (Stat box) -->
          <div class="row">

            <!-- 第一个盒子 -->
            <div class="col-lg-3 col-6">
              <div class="small-box bg-info">
                <div class="inner">
                  <h3>150吨</h3>
                  <p>今日总销量</p>
                </div>
                <div class="icon">
                  <i class="ion ion-bag"></i>
                </div>
                <a href="#" class="small-box-footer">查看更多 <i class="fa fa-arrow-circle-right"></i></a>
              </div>
            </div>

            <!-- 第二个盒子 -->
            <div class="col-lg-3 col-6">
              <!-- small box -->
              <div class="small-box bg-success">
                <div class="inner">
                  <h3>50000.00元</h3>

                  <p>今日总销售额</p>
                </div>
                <div class="icon">
                  <i class="ion ion-stats-bars"></i>
                </div>
                <a href="#" class="small-box-footer">查看更多 <i class="fa fa-arrow-circle-right"></i></a>
              </div>
            </div>

            <!-- 第三个盒子 -->
            <div class="col-lg-3 col-6">
              <!-- small box -->
              <div class="small-box bg-warning">
                <div class="inner">
                  <h3>99<sup style="font-size: 20px">%</sup></h3>
                  <p>月度目标达成率</p>
                </div>
                <div class="icon">
                  <i class="ion ion-person-add"></i>
                </div>
                <a href="#" class="small-box-footer">查看更多 <i class="fa fa-arrow-circle-right"></i></a>
              </div>
            </div>

            <!-- 第四个盒子 -->
            <div class="col-lg-3 col-6">
              <!-- small box -->
              <div class="small-box bg-danger">
                <div class="inner">
                  <h3>15<sup style="font-size: 20px">%</sup></h3>
                  <p>年度目标达成率</p>
                </div>
                <div class="icon">
                  <i class="ion ion-pie-graph"></i>
                </div>
                <a href="#" class="small-box-footer">查看更多 <i class="fa fa-arrow-circle-right"></i></a>
              </div>
            </div>

          </div>
          <!-- 四个小盒子结束/.row -->

          <!-- 左右竖列功能开始Main row -->
          <div class="row">

            <!-- 左竖列功能开始Left col -->
            <section class="col-lg-7 connectedSortable">

              <!-- 销售情况波浪图Custom tabs (Charts with tabs)-->
              <div class="card">

                <!-- 按钮触发模态框 -->
                <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                  开始演示模态框
                </button>
                <!-- 模态框（Modal） -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                          &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                          模态框（Modal）标题
                        </h4>
                      </div>
                      <div class="modal-body">
                        在这里添加一些文本
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary">
                          提交更改
                        </button>
                      </div>
                    </div><!-- /.modal-content -->
                  </div><!-- /.modal -->
                </div>
                <!-- 模态框（Modal)结束-->

                <div class="card-header d-flex p-0">
                  <h3 class="card-title p-3">
                    <i class="fa fa-pie-chart mr-1"></i>
                    销售情况(本周)
                  </h3>
                  <ul class="nav nav-pills ml-auto p-2">
                    <li class="nav-item">
                      <a class="nav-link active" href="#revenue-chart" data-toggle="tab">本周</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#sales-chart" data-toggle="tab">月度</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#sales-chart" data-toggle="tab">年度</a>
                    </li>
                  </ul>
                </div><!-- /.card-header -->
                <div class="card-body">
                  <div class="tab-content p-0">
                    <!-- Morris chart - Sales -->
                    <div class="chart tab-pane active" id="revenue-chart"
                         style="position: relative; height: 300px;"></div>
                    <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
                  </div>
                </div><!-- /.card-body -->
              </div>
              <!-- /.card -->

              <!-- 备忘录开始TO DO List -->
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">
                    <i class="ion ion-clipboard mr-1"></i>
                    To Do List
                  </h3>

                  <div class="card-tools">
                    <ul class="pagination pagination-sm">
                      <li class="page-item"><a href="#" class="page-link">&laquo;</a></li>
                      <li class="page-item"><a href="#" class="page-link">1</a></li>
                      <li class="page-item"><a href="#" class="page-link">2</a></li>
                      <li class="page-item"><a href="#" class="page-link">3</a></li>
                      <li class="page-item"><a href="#" class="page-link">&raquo;</a></li>
                    </ul>
                  </div>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                  <ul class="todo-list">
                    <li>
                      <!-- drag handle -->
                      <span class="handle">
                          <i class="fa fa-ellipsis-v"></i>
                          <i class="fa fa-ellipsis-v"></i>
                        </span>
                      <!-- checkbox -->
                      <input type="checkbox" value="" name="">
                      <!-- todo text -->
                      <span class="text">5点接宝宝放学</span>
                      <!-- Emphasis label -->
                      <small class="badge badge-danger"><i class="fa fa-clock-o"></i> 2 mins</small>
                      <!-- General tools such as edit or delete-->
                      <div class="tools">
                        <i class="fa fa-edit"></i>
                        <i class="fa fa-trash-o"></i>
                      </div>
                    </li>

                    <li>
                        <span class="handle">
                          <i class="fa fa-ellipsis-v"></i>
                          <i class="fa fa-ellipsis-v"></i>
                        </span>
                      <input type="checkbox" value="" name="">
                      <span class="text">别忘了5点开会</span>
                      <small class="badge badge-info"><i class="fa fa-clock-o"></i> 4 hours</small>
                      <div class="tools">
                        <i class="fa fa-edit"></i>
                        <i class="fa fa-trash-o"></i>
                      </div>
                    </li>

                    <li>
                        <span class="handle">
                          <i class="fa fa-ellipsis-v"></i>
                          <i class="fa fa-ellipsis-v"></i>
                        </span>
                      <input type="checkbox" value="" name="">
                      <span class="text">今天下雨,记得带伞</span>
                      <small class="badge badge-warning"><i class="fa fa-clock-o"></i> 1 day</small>
                      <div class="tools">
                        <i class="fa fa-edit"></i>
                        <i class="fa fa-trash-o"></i>
                      </div>
                    </li>

                  </ul>
                </div>
                <!-- /.card-body -->
                <div class="card-footer clearfix">
                  <button type="button" class="btn btn-info float-right"><i class="fa fa-plus"></i> Add item</button>
                </div>
              </div>
              <!-- 备忘录结束/.card -->

            </section>
            <!-- 左竖列功能结束/.Left col -->


            <!-- 右竖列功能开始right col (We are only adding the ID to make the widgets sortable)-->
            <section class="col-lg-5 connectedSortable">

              <!-- 天气预报功能 -->
              <div class="card bg-primary-gradient">
              </div>

              <!-- 简单日历功能Calendar -->
              <div class="card bg-success-gradient">
                <div class="card-header no-border">

                  <h3 class="card-title">
                    <i class="fa fa-calendar"></i>
                    Calendar
                  </h3>
                  <!-- tools card -->
                  <div class="card-tools">
                    <!-- button with a dropdown -->
                    <div class="btn-group">
                      <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-bars"></i></button>
                      <div class="dropdown-menu float-right" role="menu">
                        <a href="#" class="dropdown-item">Add new event</a>
                        <a href="#" class="dropdown-item">Clear events</a>
                        <div class="dropdown-divider"></div>
                        <a href="#" class="dropdown-item">View calendar</a>
                      </div>
                    </div>
                    <button type="button" class="btn btn-success btn-sm" data-widget="collapse">
                      <i class="fa fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-success btn-sm" data-widget="remove">
                      <i class="fa fa-times"></i>
                    </button>
                  </div>
                  <!-- /. tools -->
                </div>
                <!-- /.card-header -->
                <div class="card-body p-0">
                  <!--The calendar -->
                  <div id="calendar" style="width: 100%"></div>
                </div>
                <!-- /.card-body -->
              </div>

            </section>
            <!-- 右竖列功能结束right col -->

          </div>
          <!-- 左右竖列功能结束/.row (main row) -->

        </div><!-- /.container-fluid -->
      </section>
      <!-- 首页所有功能结束/.content -->

    </div>
    <!-- /.content-wrapper -->

    <jsp:include page="bottomRightsInfo.jsp" flush="true"/>

  </div>
  <!-- ./wrapper -->

  <jsp:include page="scriptList.jsp" flush="true"/>
  <script src="${pageContext.request.contextPath}/statics/dist/js/pages/dashboard.js"></script>
  </body>
  <script>
      audiojs.events.ready(function() {
          audiojs.createAll();
      });
  </script>
</html>
